<template>
  <div id="register">
             <!-- 注册页面的整体盒子 -->

    <!-- 注册的盒子 -->
    <div class="register-box">
      <!-- 标题的盒子 -->
    <div class="title-box"></div>
      <!-- 注册的表单区域 -->
    <el-form class="login-box" :model="userForm" :rules="userFormRules" ref="getUserForm">
        <el-form-item prop="username">
            <el-input prefix-icon="el-icon-user" placeholder="请输入账户" v-model="userForm.username"></el-input>
        </el-form-item>
        <el-form-item prop="password">
            <el-input prefix-icon="el-icon-lock" placeholder="请输入密码" show-password v-model="userForm.password"></el-input>
        </el-form-item>
        <el-form-item prop="repassword">
            <el-input prefix-icon="el-icon-lock" placeholder="请重新输入密码" show-password v-model="userForm.repassword"></el-input>
        </el-form-item>
          <el-button type="primary" class="login" @click="inBigEvent" :loading="registering">注册</el-button>
          <el-button type="text" class="register"><a href="/login">去登录</a></el-button>
    </el-form>
    </div>
  </div>
</template>

<script>
import { regAPI } from '@/api/register'
export default {
  name: 'Register',
  data () {
    const validataRepass = (rule, value, callback) => {
      if (value !== this.userForm.password) {
        callback(new Error('两次密码输入不一致'))
      } else {
        callback()
      }
    }
    return {
      userForm: {
        username: '',
        password: '',
        repassword: ''
      },
      userFormRules: {
        username: [{
          required: true,
          message: '请输入用户名',
          trigger: 'blur'
        },
        {
          pattern: /^[a-z\d]{1,10}$/i,
          message: '账户为字母数字、长度 1-10',
          trigger: 'blur'
        }],
        password: [{
          required: true,
          message: '请输入密码',
          trigger: 'blur'
        },
        {
          pattern: /^\S{6,15}$/,
          message: '密码为非空字符串、长度 6-15',
          trigger: 'blur'
        }],
        repassword: [{
          required: true,
          message: '请输入密码',
          trigger: 'blur'
        },
        {
          pattern: /^\S{6,15}$/,
          message: '密码为非空字符串、长度 6-15',
          trigger: 'blur'
        },
        {
          validator: validataRepass,
          trigger: 'change'
        }]
      },
      registering: false
    }
  },
  methods: {
    inBigEvent () {
      this.$refs.getUserForm.validate(async (valid) => {
        if (!valid) return
        this.registering = true
        const {
          data:
        {
          code,
          message
        }
        } = await regAPI(this.userForm)
        if (code === 0) {
          this.$message.success(message)
        } else {
          this.$message.error(message)
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
    .el-form {
        margin: 0 20px;
        padding: 30px 10px;
        border-top: 1px solid #ccc;
    }
    .login {
        width: 100%;

    }
    .register {
        margin-top: 0px;
    }
  .register-box {
    width: 400px;
    height: 405px;
    background-color: #fff;
    border-radius: 3px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 40px 15px 0;
}
    .title-box {
      margin: 20px;
      height: 60px;
      background: url('~@/assets/images/login_title.png') center no-repeat;
    }

</style>
